<template>
  <div>
    <div class="header">
      <div class="header-zuo">
        <img src="../../assets/img/login/haier_logo.png" alt="">
      </div>
      <div class="header-you">
        <i class="i"></i>
      </div>
    </div>
    <div class="section">
        <div class="img">
            <img :src="'http://localhost:2468/uploads/'+ msg.avatar" alt="">
        </div>
        <div class="section-div">{{msg.phoneNum}}</div>
        <div class="hengxian"></div>
        <div class="hezi">
          <div class="hezi1">
            <div>粉丝</div>
            <p>会员等级</p>
          </div>
          <div class="hezi1">
            <div>1</div>
            <p>社区等级</p>
          </div>
          <div class="hezi1">
            <div>0</div>
            <p>海贝数量</p>
          </div>
          <div class="hezi2">
            <div>0</div>
            <p>会员等级</p>
          </div>
        </div>
    </div>
    <div class="favor">
      <div class="favor1">
        <div class="dv">
          <img src="../../assets/img/login/xingxing.webp" alt="">
        </div>
        <div class="zi">收藏订阅</div>
      </div>
      <div class="favor1">
        <div class="dv">
          <img src="../../assets/img/login/sousuo.webp" alt="">
        </div>
        <div class="zi">收藏订阅</div>
      </div>
      <div class="favor1">
        <div class="dv">
          <img src="../../assets/img/login/youhui.webp" alt="">
        </div>
        <div class="zi">收藏订阅</div>
      </div>
    </div>
    <div class="form">
      <div class="form-box">
        <div class="form-box1">
          <span class="span">账号管理</span>
          <span class="span1">安全设置，地址管理   ></span>
        </div>
        <div class="form-box1">
          <span class="span">会员特权</span>
          <span class="span1">好礼上新   ></span>
        </div>
        <div class="form-box1">
          <span class="span">我的推广</span>
          <span class="span1">邀请好礼送不停   ></span>
        </div>
        <div class="form-box1">
          <span class="span">我的社区</span>
          <span class="span1">【试用】海尔小帅影院随...   ></span>
        </div>
        <div class="btn" @click="logoutFun">退出账号</div>
      </div>
    </div>
    <div class="foot">
      <div class="foot-zuo">
        <span class="sp"></span>
        <span class="sp1">触摸板</span>
      </div>
      <div class="foot-you">
        <span class="sp"></span>
        <span class="sp1">电脑版</span>
      </div>
    </div>
    <div class="footers">
      <ul>
        <li>关于海尔</li>
        <li>练习我们</li>
        <li>法律声明</li>
        <li>帮助中心</li>
      </ul>
      <div>鲁ICP备 09096283</div>
      <p>© 2000-2020 Haier.com. All rights reserved.</p>
    </div>
  </div>
</template>

<script>
import "@/assets/css/login/user.css";
import {getInfo} from '../../utils/user'
import { mapActions } from 'vuex'
export default {
  data(){
    return {
      msg:getInfo()
    }
  },
  methods:{
    ...mapActions('login',['logout']),
    async logoutFun(){
      await this.logout()
      this.$router.push('/')
    }
  }

};
</script>

<style scoped>
</style>